<template>
  <div class="community-comments-container">
    <a-card title="社区评论管理" :bordered="false">
      <template #extra>
        <a-space>
          <a-button type="primary" @click="loadData">
            <reload-outlined />刷新
          </a-button>
        </a-space>
      </template>
      
      <a-table
        :dataSource="comments"
        :columns="columns"
        :loading="loading"
        rowKey="id"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, record }">
          <!-- 内容 -->
          <template v-if="column.key === 'content'">
            <div class="comment-content">{{ record.content }}</div>
          </template>
          
          <!-- 帖子 -->
          <template v-if="column.key === 'postTitle'">
            <a @click="viewPost(record.postId)">{{ record.postTitle || `帖子#${record.postId}` }}</a>
          </template>
          
          <!-- 创建时间 -->
          <template v-if="column.key === 'createTime'">
            {{ formatDate(record.createTime) }}
          </template>
          
          <!-- 状态 -->
          <template v-if="column.key === 'status'">
            <a-tag :color="record.status === 1 ? 'green' : 'red'">
              {{ record.status === 1 ? '正常' : '已禁用' }}
            </a-tag>
          </template>
          
          <!-- 操作 -->
          <template v-if="column.key === 'action'">
            <a-space>
              <a @click="viewPost(record.postId)">查看帖子</a>
              <a-divider type="vertical" />
              <a-dropdown>
                <a class="ant-dropdown-link">
                  更多 <down-outlined />
                </a>
                <template #overlay>
                  <a-menu>
                    <a-menu-item v-if="record.status === 1" @click="changeStatus(record.id, 0)">
                      <stop-outlined /> 禁用
                    </a-menu-item>
                    <a-menu-item v-else @click="changeStatus(record.id, 1)">
                      <check-circle-outlined /> 启用
                    </a-menu-item>
                    <a-menu-item @click="deleteComment(record.id)">
                      <delete-outlined /> 删除
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { message } from 'ant-design-vue';
import {
  ReloadOutlined,
  DownOutlined,
  StopOutlined,
  CheckCircleOutlined,
  DeleteOutlined
} from '@ant-design/icons-vue';

const router = useRouter();

// 数据相关
const comments = ref([]);
const loading = ref(false);
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showTotal: (total) => `共 ${total} 条数据`
});

// 表格列定义
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    width: 80
  },
  {
    title: '帖子',
    key: 'postTitle',
    width: 150
  },
  {
    title: '内容',
    key: 'content',
    ellipsis: true
  },
  {
    title: '作者',
    dataIndex: 'userNickname',
    key: 'userNickname',
    width: 120
  },
  {
    title: '点赞数',
    dataIndex: 'likes',
    key: 'likes',
    width: 100,
    sorter: true
  },
  {
    title: '状态',
    key: 'status',
    width: 100,
    filters: [
      { text: '正常', value: 1 },
      { text: '已禁用', value: 0 }
    ]
  },
  {
    title: '创建时间',
    key: 'createTime',
    width: 160,
    sorter: true
  },
  {
    title: '操作',
    key: 'action',
    width: 150,
    fixed: 'right'
  }
];

// 加载数据
const loadData = async () => {
  loading.value = true;
  try {
    const res = await axios.get('/admin/api/community/comments/recent', {
      params: {
        limit: pagination.value.pageSize
      }
    });
    
    if (res.data.code === 0) {
      comments.value = res.data.data;
      pagination.value.total = res.data.data.length;
    } else {
      message.error(res.data.message || '获取数据失败');
    }
  } catch (error) {
    message.error('获取数据失败: ' + error.message);
  } finally {
    loading.value = false;
  }
};

// 表格变化处理
const handleTableChange = (pag, filters, sorter) => {
  pagination.value.current = pag.current;
  pagination.value.pageSize = pag.pageSize;
  loadData();
};

// 查看帖子
const viewPost = (postId) => {
  router.push(`/community/posts/${postId}`);
};

// 修改评论状态
const changeStatus = async (id, status) => {
  try {
    const res = await axios.put(`/admin/api/community/comments/${id}/status`, {
      status
    });
    
    if (res.data.code === 0) {
      message.success('操作成功');
      loadData();
    } else {
      message.error(res.data.message || '操作失败');
    }
  } catch (error) {
    message.error('操作失败: ' + error.message);
  }
};

// 删除评论
const deleteComment = async (id) => {
  try {
    const res = await axios.delete(`/admin/api/community/comments/${id}`);
    
    if (res.data.code === 0) {
      message.success('删除成功');
      loadData();
    } else {
      message.error(res.data.message || '删除失败');
    }
  } catch (error) {
    message.error('删除失败: ' + error.message);
  }
};

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
};

// 初始化
onMounted(() => {
  loadData();
});
</script>

<style scoped>
.community-comments-container {
  padding: 24px;
}

.comment-content {
  white-space: pre-wrap;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 60px;
}
</style> 